<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="dictPage.list"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id"
      @selection-change="selectDictItem"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="编码" width="120">
        <template slot-scope="scope">{{ scope.row.code }}</template>
      </el-table-column>
      <el-table-column label="类型" width="120">
        <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="125">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column prop="name" label="字典值" width="125">
        <template slot-scope="scope">{{ scope.row.value }}</template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="125">
        <template slot-scope="scope">{{
            scope.row.tenantDict.username
          }}
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="125">
        <template slot-scope="scope">{{
            scope.row.tenantDict.nickname
          }}
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="125">
        <template slot-scope="scope">{{ scope.row.sort }}</template>
      </el-table-column>
      <el-table-column prop="tableName" label="表名" width="125">
        <template slot-scope="scope">{{ scope.row.tableName }}</template>
      </el-table-column>
      <el-table-column prop="tableColumn" label="列名" width="125">
        <template slot-scope="scope">{{ scope.row.tableColumn }}</template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="125">
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="150">
        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="change(scope.row)" type="text" size="small"
          >修改
          </el-button
          >
          <el-button type="text" size="small" @click="removeDict(scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page-position">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        :current-page="dictPage.currPage"
        :total="dictPage.totalCount"
        @size-change="modifyDictPageSize"
        @current-change="modifyDictCurrPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dictData: {
      type: Object
    }
  },
  watch: {
    dictData(newVal) {
      this.dictPage = newVal
    }
  },
  data() {
    return {
      dictPage: {}
    }
  },
  created() {
  },
  methods: {
    change() {
    },
    // 删除事件，单删
    removeDict(item) {
      this.$store.commit('dict/setRmDictIds', [item.id]);
      this.$emit('removeDict')
    },
    // 选中字典项
    selectDictItem(items) {
      const dictIds = [];
      for (const item of items) {
        dictIds.push(item.id);
      }
      this.$store.commit('dict/setRmDictIds', dictIds);
    },
    // 页数改变
    modifyDictPageSize(val) {
      this.$store.state.dict.dictSear.limit = val;
      this.$emit('searchDict');
    },
    // 当前页改变
    modifyDictCurrPage(val) {
      this.$store.state.dict.dictSear.offset = val;
      this.$emit('searchDict');
    }
  }
}
</script>

<style>
@import url("~@/styles/common.css");
</style>
